<!DOCTYPE html>
<html>
<head>
    <title>Elevator Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="850" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const angle = Math.atan2(toy - fromy, tox - fromx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Helper function to draw the person silhouette
        function drawPerson(ctx, cx, cy) {
            ctx.save();
            ctx.translate(cx, cy);
            ctx.fillStyle = 'black';
            ctx.beginPath();
            
            // Head
            ctx.arc(0, -50, 10, 0, Math.PI * 2);
            ctx.fill();

            // Body + Arms
            ctx.beginPath();
            ctx.moveTo(-15, -40);
            ctx.lineTo(-28, -20);
            ctx.lineTo(-10, -5);
            ctx.lineTo(10, -5);
            ctx.lineTo(28, -20);
            ctx.lineTo(15, -40);
            ctx.closePath();
            ctx.fill();

            // Legs + Feet
            ctx.beginPath();
            ctx.moveTo(-10, -5);
            ctx.lineTo(-10, 15);
            ctx.bezierCurveTo(-10, 25, -25, 25, -25, 15);
            ctx.lineTo(-15, 15);
            ctx.lineTo(-5, 0);
            ctx.lineTo(5, 0);
            ctx.lineTo(15, 15);
            ctx.lineTo(25, 15);
            ctx.bezierCurveTo(25, 25, 10, 25, 10, 15);
            ctx.lineTo(10, -5);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }


        // --- Draw Part 甲 (Elevator) ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        
        const jiaCenterX = 150;
        const jiaCenterY = 270;
        
        // Elevator box
        ctx.strokeRect(jiaCenterX - 75, jiaCenterY - 120, 150, 220);
        
        // People inside
        drawPerson(ctx, jiaCenterX - 35, jiaCenterY + 85);
        drawPerson(ctx, jiaCenterX + 35, jiaCenterY + 85);

        // Force arrow
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        drawArrow(ctx, jiaCenterX, jiaCenterY - 120, jiaCenterX, jiaCenterY - 180);
        
        // Text "拉力F"
        ctx.font = 'bold 22px KaiTi';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('拉力', jiaCenterX + 15, jiaCenterY - 165);
        ctx.font = 'italic bold 22px Times New Roman';
        ctx.fillText('F', jiaCenterX + 60, jiaCenterY - 165);

        // Label "甲"
        ctx.font = '22px KaiTi';
        ctx.textAlign = 'center';
        ctx.fillText('甲', jiaCenterX, jiaCenterY + 135);


        // --- Draw Part 乙 (Graph) ---
        const originX = 380;
        const originY = 430;
        const scaleX = 8;
        const scaleY = 100;

        ctx.lineWidth = 1.5;

        // Draw axes
        drawArrow(ctx, originX, originY, originX, 100); // Y-axis
        drawArrow(ctx, originX, originY, originX + 450, originY); // X-axis
        
        // Axis Labels
        ctx.font = '18px Arial';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('F × 10', originX + 10, 110);
        
        ctx.font = '12px Arial';
        ctx.fillText('4', originX + 68, 105);
        ctx.font = '18px Arial';
        ctx.fillText('/ N', originX + 78, 110);
        
        ctx.textAlign = 'center';
        ctx.fillText('h / m', originX + 440, originY + 25);
        
        // Ticks and values on axes
        ctx.font = '16px Arial';
        ctx.textAlign = 'right';
        const yValues = [1.5, 2.0, 2.5];
        yValues.forEach(val => {
            const y = originY - val * scaleY;
            ctx.fillText(val.toFixed(1), originX - 10, y);
            ctx.beginPath();
            ctx.moveTo(originX - 5, y);
            ctx.lineTo(originX, y);
            ctx.stroke();
        });

        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        const xValues = [0, 4, 44, 48];
        xValues.forEach(val => {
            const x = originX + val * scaleX;
            ctx.fillText(val, x, originY + 8);
             if (val !== 0) {
                ctx.beginPath();
                ctx.moveTo(x, originY);
                ctx.lineTo(x, originY + 5);
                ctx.stroke();
             }
        });
        ctx.textBaseline = 'middle'; // Reset

        // Coordinates of key points on the graph
        const x4 = originX + 4 * scaleX;
        const y2_5 = originY - 2.5 * scaleY;
        const x44 = originX + 44 * scaleX;
        const y2_0 = originY - 2.0 * scaleY;
        const y1_5 = originY - 1.5 * scaleY;
        const x48 = originX + 48 * scaleX;

        // --- Draw Dashed Lines ---
        ctx.save();
        ctx.setLineDash([5, 3]);
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1;
        ctx.beginPath();
        
        // Dashed lines for h=4 change
        ctx.moveTo(x4, originY);
        ctx.lineTo(x4, y2_5);

        // Dashed lines for h=44 change
        ctx.moveTo(x44, originY);
        ctx.lineTo(x44, y2_0);
        
        // Dashed lines for end h=48
        ctx.moveTo(x48, originY);
        ctx.lineTo(x48, y1_5);
        
        // Horizontal dashed lines
        ctx.moveTo(originX, y2_5);
        ctx.lineTo(x4, y2_5);

        ctx.moveTo(originX, y2_0);
        ctx.lineTo(x44, y2_0);
        
        ctx.moveTo(originX, y1_5);
        ctx.lineTo(x44, y1_5);
        
        ctx.stroke();
        ctx.restore();

        // --- Draw Solid Graph Line ---
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
        
        ctx.moveTo(originX, y2_5);
        ctx.lineTo(x4, y2_5);
        ctx.lineTo(x4, y2_0);
        ctx.lineTo(x44, y2_0);
        ctx.lineTo(x44, y1_5);
        ctx.lineTo(x48, y1_5);
        ctx.stroke();
        
        // Label "乙"
        ctx.font = '22px KaiTi';
        ctx.textAlign = 'center';
        ctx.fillText('乙', originX + (48*scaleX)/2, originY + 60);

    </script>
</body>
</html>